<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <style>
      body {
        font-size: 12px;
      }
      hr {
        margin: 10px 0;
        color: #ccc;
      }
      .header {
        margin-top: 10px 0;
        overflow: hidden;
      }
      #logo {
        float: left;
        margin-right: 50px;
      }
      #nav {
        float: right;
        margin-top: 20px;
      }
      #nav ul li {
        float: left;
        width: 100px;
      }
      #nav ul li a {
        display: block;
        text-align: center;
        color: #888888;
        text-decoration: none;
        border-right: 1px solid #888888;
      }
      #nav ul li a:hover {
        color: black;
      }
      #nav ul li:last-child a {
        border-right: none;
      }
      .banner img {
        float: left;
        width: 695px;
      }
      #info {
        float: right;
        width: 260px;
        color: #888888;
      }
      #info h1 {
        font-size: 21px;
        font-weight: bold;
        letter-spacing: 10px;
        color: orange;
        text-align: center;
      }
      #info h1 span {
        font-size: 31px;
      }
      #info p {
        text-indent: 2em;
        line-height: 1.5em;
        margin: 1em 0;
      }
      #info p a {
        text-decoration: none;
        color: orange;
      }
      .comment ul li {
        overflow: hidden;
        border-top: 1px dotted #888888;
      }
      .comment ul li img {
        float: left;
        width: 50px;
        height: 50px;
        padding: 20px;
      }
      div.comment_detail {
        padding: 20px 10px;
      }
      .footer {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        color: #999;
      }
      span.comment_user {
        color: orange;
        font-size: 16px;
        padding-right: 50px;
      }
      span.comment_time {
        color: #888888;
        font-size: 12px;
      }
      div.comment_detail p {
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div id="logo"><img src="./images/logo.png" alt="logo" /></div>
      <div id="nav">
        <ul>
          <li><a href="#">旅游首页</a></li>
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
        </ul>
      </div>
    </div>
    <div class="banner">
      <img src="./images/banner.jpg" alt="banner" />
      <div id="info">
        <h1>说<span>旅</span>游</h1>
        <p>
          伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁（Noonu
          Atoll）中，它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在，美丽而遗世独立。
        </p>
        <p>
          最佳旅游时间：1月-12月，热带海洋气候，全年皆适合旅游。12月至次年4月可避开高峰。
        </p>
        <p>
          伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框
          <a href="#">......[详细]</a>
        </p>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="comment">
      <ul>
        <li>
          <img src="./images/person1.jpg" alt="头像" />
          <div class="comment_detail">
            <div>
              <span class="comment_user">丁真</span
              ><span class="comment_time">2024-01-01 12:00:30</span>
            </div>
            <p>伊露岛是个美丽的地方，但是不如理塘高峰更美丽。</p>
          </div>
        </li>
        <li>
          <img src="./images/person2.jpg" alt="头像" />
          <div class="comment_detail">
            <div>
              <span class="comment_user">蔡徐坤</span
              ><span class="comment_time"> 2024-01-23 12:10:01</span>
            </div>
            <p>手机丢了发现是小黑给我偷的， 你干嘛嗨嗨哟</p>
          </div>
        </li>
        <li>
          <img src="./images/person3.jpg" alt="头像" />
          <div class="comment_detail">
            <div>
              <span class="comment_user">孙笑川</span
              ><span class="comment_time"> 2024-02-12 10:30:20</span>
            </div>
            <p>
              岛还可以，就是沙屋有虫子，不太让人满意，水屋确实挺棒的。饭嘛，国外基本都那样吧，海鲜还行，
              不过我还是喜欢喝热粥
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer"><h2>Copyright © 2013-2024 一日游网 版权所有</h2></div>
  </body>
</html>
